<script setup lang="ts">
// 字段级别的表单验证
// 1. 字段标识 字符串类型 标识必须是唯一的
const {
  value: usernameField,
  errorMessage: usernameError,
  meta: usernameMeta,
  validate: usernameValidate,
  setValue: setUsernameValue,
  resetField: resetUsernameField,
} = useField("username", username, { initialValue: "张三" });

const {
  value: passwordField,
  errorMessage: passwordError,
  meta: passwordMeta,
  setValue: setPasswordValue,
  resetField: resetPasswordField,
} = useField("password", password);

// 使用该方法验证用户名
// 参数就是要验证的表单值
function username(value: unknown) {
  // 如果没有验证通过 返回没有验证通过的错误信息
  // 如果验证通过 返回 true
  if (!value) return "请输入用户名";
  if (typeof value !== "string") return "用户名的类型错误";
  if (value.length < 2) return "用户名的长度不能小于2";
  return true;
}

function password(value: unknown) {
  if (!value) return "请输入密码";
  if (typeof value !== "string") return "密码的类型错误";
  if (value.length < 6) return "密码的长度不能小于6";
  return true;
}

function onSubmit(event: Event) {
  // 阻止表单默认提交的行为
  event.preventDefault();
  // 在此处我们必须要知道当前表单中的表单项是否通过了验证
  if (usernameMeta.validated && usernameMeta.valid) {
    console.log("用户名验证通过");
  } else {
    console.log("用户名没有验证通过");
  }
  if (passwordMeta.validated && passwordMeta.valid) {
    console.log("密码验证通过");
  } else {
    console.log("密码没有验证通过");
  }
}

// 动态测试用户名是否通过验证
function testValidate() {
  usernameValidate();
  console.log(usernameMeta);
}
// 设置表单值
function setFormValue() {
  setUsernameValue("李四");
  setPasswordValue("123456");
}
// 重置表单值
function resetFormValue() {
  resetUsernameField();
  resetPasswordField();
}
</script>

<template>
  <form @submit="onSubmit" class="container mt-6">
    <div class="field">
      <label class="label">用户名</label>
      <div class="control has-icons-left">
        <input
          v-model="usernameField"
          class="input"
          type="text"
          placeholder="请输入用户名"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </div>
      <p class="help is-danger" v-if="usernameError">{{ usernameError }}</p>
    </div>
    <div class="field">
      <label class="label">密码</label>
      <div class="control has-icons-left">
        <input
          v-model="passwordField"
          class="input"
          type="password"
          placeholder="请输入密码"
        />
        <span class="icon is-small is-left">
          <i class="fas fa-key"></i>
        </span>
      </div>
      <p class="help is-danger" v-if="passwordError">{{ passwordError }}</p>
    </div>
    <div class="field is-grouped">
      <div class="control">
        <button type="submit" class="button is-link">提交</button>
      </div>
      <div class="control">
        <button
          type="button"
          class="button is-link is-light"
          @click="resetFormValue"
        >
          重置
        </button>
      </div>
      <div class="control">
        <button
          type="button"
          class="button is-link is-light"
          @click="setFormValue"
        >
          设置表单值
        </button>
      </div>
      <div class="control">
        <button
          @click="testValidate"
          type="button"
          class="button is-link is-light"
        >
          测试validate方法
        </button>
      </div>
    </div>
  </form>
</template>

<style lang="less" scoped>
@import "https://bulma.io/vendor/fontawesome-free-5.15.2-web/css/all.min.css";
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
</style>
